Tooltips Guidelines 工具指導規則

Usage 用法

工具提示為使用者介面元素提供額外的上下文資訊。

Plain tooltips  普通工具提示

普通工具提示用簡單的文字說明介面元素的用途。它主要用於沒有文字說明的介面元素上,比如只有圖示的按鈕或輸入框,幫助使用者理解這些元素的功能。

Rich tooltips  豐富的工具提示

豐富的工具提示能讓使用者更好地理解介面元素。它可以包含小標題、按鈕和連結。當你需要展示比較詳細的說明或解釋時,使用這種工具提示最合適。

1. Plain tooltip 2. Rich tooltip
✓ 使用純文字工具提示來標註僅含圖示的按鈕
× 當使用者介面元素已有標籤時,無需純文字工具提示
✓ 使用豐富的工具提示來提供關於介面元素或新特性的額外資訊和操作
× 不要講關鍵資訊隱藏在工具提示中,因為這樣容易錯過,該工中斷型對話方塊

Anatomy 結構

Plain tooltip  普通工具提示

1. Supporting text 2. Container

Supporting text  輔助文字

✓ 簡要描述一個使用者介面元素
× 避免將文字換行或多行顯示

Rich tooltip  豐富的工具提示

1 Subhead (optional) 2 Supporting text 3 Text buttons (optional) 4 Container

Subhead (optional) 副標題(可選)

副標題要簡單明瞭,最好只有一行。副標題的作用是概括工具提示的主要內容。特別是在工具提示自動顯示時(比如頁面剛載入時),一個好的副標題能幫助使用者快速理解資訊。

✓ 用簡短的話總結資訊
× 太囉嗦了,關鍵資訊(image quality)拖到了第二行避免換行超過一行

Text buttons (optional) 文字按鈕(可選)

富文字工具提示可以包含最多兩個按鈕。按鈕上的文字要短且清晰,並且要和提示內容有關。把按鈕放在同一行,不要上下堆放。

× 避免按鈕堆疊

Placement  放置位置

Plain tooltips  普通工具提示

普通工具提示會顯示在介面元素的正上方。

特殊情況:如果元素在頁面頂部的工具欄中,工具提示會改為顯示在元素下方,保持相同的間距。

Rich tooltips 富文字工具提示

富文字工具提示會顯示在介面元素的右下方。它會自動調整位置,確保不會超出螢幕邊緣,也不會遮擋住原來的介面元素。

Dynamic positioning 動態定位:為了保持在螢幕範圍內,工具提示會每次移動8個畫素點來調整位置。

Desktop placement 桌面放置:在電腦桌面版本中,工具提示通常會顯示在介面元素的正下方中間位置。只要滑鼠保持在目標區域內,工具提示就會一直顯示。

Behavior 行為

要顯示工具提示,請在桌面上懸停在父元素上,或在移動裝置上點選並按住該元素。永續性富工具提示僅在點選或輕觸時出現。

Transient by default 預設情況下為臨時顯示

當你移開滑鼠或手指後,所有型別的工具提示會在1.5秒內自動消失。如果你觸發了新的工具提示,已經顯示的工具提示會馬上關閉。

× 一次只顯示一個工具提示

Persistent rich tooltips 持久豐富工具提示

持久豐富工具提示會在兩種情況下顯示:

這種工具提示有個特點:即使使用者的滑鼠或手指離開了原來的位置,提示也會繼續顯示。只有當使用者點選或觸碰介面上的其他內容時,提示才會消失。注意,滑鼠懸停在元素上並不會觸發這類提示。

這種提示最適合用來介紹新功能,比如在頁面剛載入時向使用者展示新特性。但要注意:不建議在只有圖示的按鈕上使用這種永續性提示。

× 不要再圖示按鈕上使用持久的富文字提示

Interaction & style  互動與樣式

無需執行操作的純文字和富文字工具提示應在螢幕上保留足夠長的時間,以便使用者接收資訊,而不會干擾他們當前的操作流程或任務。

✓ 普通工具提示應在游標一開口暫時保留在螢幕上

工具提示會在你把滑鼠放在按鈕或導航欄上時顯示。記住一點:工具提示不能擋住重要內容。如果你想看到更詳細的工具提示,可以直接點選元素,而不是用滑鼠懸停。

工具提示可在懸停或聚焦時出現,以進一步解釋操作
當元素被選中時,豐富的工具提示可以出現